<!--
  - Copyright 2014-2018 the original author or authors.
  -
  - Licensed under the Apache License, Version 2.0 (the "License");
  - you may not use this file except in compliance with the License.
  - You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <sba-accordion
    :id="`metadata-details-panel__${instance.id}`"
    v-model="panelOpen"
    :title="$t('instances.details.metadata.title')"
    :seamless="true"
  >
    <template #title>
      <div class="ml-2 transition-opacity" :class="{ 'opacity-0': !panelOpen }">
        ({{ Object.keys(metadata).length }})
      </div>
    </template>
    <sba-key-value-table v-if="!isEmptyMetadata" :map="metadata" />
  </sba-accordion>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

import Instance from '@/services/instance';
import { sortObject } from '@/utils/sortObject';
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';

const { instance } = defineProps<{
  instance: Instance;
}>();

const panelOpen = ref(true);

const metadata = computed(() => {
  return sortObject(instance.registration.metadata);
});

const isEmptyMetadata = computed(() => {
  return Object.keys(instance.registration.metadata).length <= 0;
});
</script>
